<template>
  <div class="mnt-dialog form-container">
    <p class="forgt-pwd1-title" />
    <el-form ref="form" :model="forgtPwd1" :rules="rules" label-width="20px" class="forgt-pwd1-container">
      <el-row :gutter="12">
        <el-col :span="12" :offset="6">
          <p class="tip">请输入注册手机号</p>
        </el-col>
        <el-col :span="12" :offset="6">
          <el-form-item prop="mobile">
            <el-input v-model="forgtPwd1.mobile" clearable />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="12" :offset="6">
          <el-button type="primary" :disabled="!forgtPwd1.mobile" class="forgtPwd1Btn" @click="Next1">下一步</el-button>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>
<script>
export default {
  name: 'ForgtPwd1',
  data() {
    return {
      forgtPwd1: {
        mobile: ''
      },
      rules: {

      }
    }
  },
  mounted() {
    this.$form = this.$refs.form
    this.initRules()
  },
  methods: {
    initRules() {
      this.rules = {
        mobile: this.HEY_VALIDATOR({ type: ['MOBILE'], required: false, trigger: ['blur'] })
      }
      this.$nextTick(() => {
        this.$form.clearValidate()
      })
    },
    Next1() {
      this.$form.validate(valid => {
        if (valid) {
          this.get('/login/validateAuthUserMobile', this.forgtPwd1).then(res => {
            this.$emit('nextClick', this.forgtPwd1.mobile)
          })
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
  .tip {
  }
</style>
